<template>
  <div class="work">
    <!-- 头部 -->
    <div class="top">
      <div class="top_location">首页 / Dashboard / 工作台</div>
      <div class="top_content">
        <div class="top_content_touxiang">
          <img :src="imgarr.img01" alt="">
        </div>
        <div class="top_content_text">
          <span>欢迎您，尊敬的用户！</span>
          <p>超级管理员 | 江西华邦传媒有限公司</p>
        </div>
        <div class="top_content_day">
          <span>到期天数</span>
          <p>600</p>
        </div>
      </div>
    </div>
    <!-- 第二部分 -->
    <div class="second">
      <ul class="second01">
        <li>
          <div class="li_title">
            <span>销售总额</span>
            <img :src="imgarr.img02" alt="">
          </div>
          <h2 class="li_num">￥10，000</h2>
          <div class="li_end">
            日销售额  ￥2,423
          </div>
        </li>
        <li>
          <div class="li_title">
            <span>今日订单</span>
            <img :src="imgarr.img02" alt="">
          </div>
          <h2 class="li_num">10</h2>
          <div class="li_end">
            日销售额  ￥60
          </div>
        </li>
        <li>
          <div class="li_title">
            <span>今日预约</span>
            <img :src="imgarr.img02" alt="">
          </div>
          <h2 class="li_num">2</h2>
          <div class="li_end">
            日销售额  ￥12,000
          </div>
        </li>
      </ul>
      <div class="second02">
        <div class="second02_top">
          <span>快捷导航</span>
        </div>
        <ul class="second02_ul">
          <li v-for="item in DaoHangList">
            <router-link :to='item.href'>{{item.name}}</router-link>
          </li>
          <li>
            <div class="last_li_01" v-if="!ifTianJia" @click="TianJiaHandle">
              <img :src="imgarr.img03" alt="">
              <span>添加</span>
            </div>
            <div class="last_li_02" v-else>
              <input type="text" v-model="name" @keyup="keyupHandle">
              <img class="del" :src="imgarr.img04" alt="" @click="ifTianJia=false,name=''">
            </div>
          </li>
        </ul>
      </div>
    </div>

    <div class="third">
      <div class="third_header">
        <div class="third_header_01">
          <span :class="{act01:ifthird01}" @click="thirdHandle01(1)">销售额</span>
          <span :class="{act01:!ifthird01}" @click="thirdHandle01(2)">访问量</span>
        </div>
        <div class="third_header_02">
          <el-date-picker
            v-model="value1"
            type="daterange"
            range-separator="至"
            align="center"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </div>
      </div>
      <div class="shuzhuangtu">
        <span class="shuzhuangtu_title">销售趋势</span>
        <div class="shuzhuangtu01">
          <ve-histogram :data="chartData1" height="300px" :settings="chartSettings1" :extend="chartExtend1"></ve-histogram>
        </div>
      </div>
      <div class="paiming">
        <span class="shuzhuangtu_title">产品销售排名</span>
        <div class="paiming01">
          <ul class="paiming_ul">
            <li v-for="item,idx in paiming" :class="{paiming_act:idx+1<=3}">
              <p>{{idx+1}}</p>
              <span>江西华邦传媒有限公司</span>
              <span>1234</span>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <div class="fourth">
      <div class="fourth01">
        <div class="fourth01_top">
          <span :class="{act02:!iffourth01}" @click="fourth01Handle(1)">动态</span>
          <span :class="{act02:iffourth01}" @click="fourth01Handle(2)">公告</span>
        </div>
        <div class="fourth02">
          <ul>
            <li v-for="item,idx in msg">
              <div class="touxiang">
                <img :src="imgarr.img01" alt="">
              </div>
              <div class="msg">
                <span>朱偏右 在 工程效能 发布了 留言</span>
                <p>1小时前</p>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <div class="fourthRight">
        <div class="fourthRight_top">空间大小</div>
        <div class="fourthRight_content">
          <div class="fourthRight_content_01">
            <span>所有站点</span>
            <p>7251</p>
          </div>
          <div class="fourthRight_content_02">
            <ve-liquidfill :data="chartData3" :settings="chartSettings3" width='300px' height="300px"></ve-liquidfill>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import img01 from './images/touxiang.png'
import img02 from './images/tishi.png'
import img03 from './images/jia.png'
import img04 from './images/quxiao.png'
export default {
  data () {
    this.chartSettings1 = {
      itemStyle: {
        color: '#3aa1ff'
      }
    }
    this.chartExtend1 = {
      barWidth: '30px'
    }
    this.chartSettings3 = {
      seriesMap: {
        '剩余空间': {
          color: ['#3aa1ff'],
          itemStyle: {
            opacity: 0.8
          },
          emphasis: {
            itemStyle: {
              opacity: 0.9
            }
          },
          backgroundStyle: {
            color: '#fff'
          },
          outline: {
            borderDistance: 2,
            itemStyle: {
              borderColor: '#3aa1ff',
              borderWidth: '2'
            }
          },
          label: {
            // formatter (options) {
            //   const {
            //     seriesName,
            //     value
            //   } = options
            //   return `${seriesName}\n${value * 100}%`
            // },
            fontSize: 28,
            color: '#3aa1ff',
            insideColor: '#fff'
          }
        }
      }
    }
    return {
      imgarr: {
        img01,
        img02,
        img03,
        img04
      },
      name: '',
      ifTianJia: false,
      DaoHangList: [
        { name: '工作台', href: '/' },
        { name: '网站概况', href: 'control/Overview' },
        { name: '栏目统计', href: 'control/Column' },
        { name: '产品统计', href: 'control/Product' },
        { name: '文章统计', href: 'control/article' }
      ],
      chartData1: {
        columns: ['日期', '销售额'],
        rows: [
          { '日期': '1/1', '销售额': 1393 },
          { '日期': '1/2', '销售额': 3530 },
          { '日期': '1/3', '销售额': 2923 },
          { '日期': '1/4', '销售额': 1723 },
          { '日期': '1/5', '销售额': 3792 },
          { '日期': '1/6', '销售额': 4593 },
          { '日期': '1/7', '销售额': 1393 },
          { '日期': '1/8', '销售额': 3530 },
          { '日期': '1/9', '销售额': 2923 },
          { '日期': '1/10', '销售额': 1723 },
          { '日期': '1/11', '销售额': 3792 },
          { '日期': '1/12', '销售额': 4593 }
        ]
      },
      ifthird01: true,
      value1: '',
      paiming: [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}],
      iffourth01: false,
      msg: [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}],
      chartData3: {
        columns: ['city', 'percent'],
        rows: [{
          city: '剩余空间',
          percent: 0.38
        }]
      }
    }
  },
  methods: {
    TianJiaHandle () {
      this.ifTianJia = true
    },
    keyupHandle (event) {
      if (event.keyCode == 13) {
        var obj = this.$store.state.routerList.filter(e => {
          return e.name == this.name
        })
        if (obj == '') {
          alert('请输入正确的栏目名')
        } else {
          this.DaoHangList.push(obj[0])
          this.name = ''
        }
      }
    },
    thirdHandle01 (idx) {
      if (idx == 1) {
        this.ifthird01 = true
      } else {
        this.ifthird01 = false
      }
    },
    fourth01Handle (idx) {
      if (idx == 1) {
        this.iffourth01 = false
      } else {
        this.iffourth01 = true
      }
    }
  }
}
</script>

<style>
.top{
  width: calc(100% - 50px);
  height: 110px;
  background-color: #ffffff;
  padding: 15px 25px 25px 25px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
}
.top_location{
  font-size: 14px;
  color: #8c8c8c;
}
.top_content{
  width: 100%;
  height: 85px;
  display: flex;
  align-items: center;
}
.top_content_touxiang{
  width: 85px;
  height: 85px;
  border-radius: 50%;
  background-color: #e5e5e5;
  overflow: hidden;
}
.top_content_touxiang img{
  display: block;
  width: 100%;
  height: 100%;
}
.top_content_text{
  width: 225px;
  height: 56px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  margin-left: 25px;
  flex: 1;
}
.top_content_text span{
  font-size: 20px;
  color: #030303;
}
.top_content_text p{
  color: #8c8c8c;
  font-size: 14px;
}
.top_content_day{
  width: 60px;
  height: 55px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}
.top_content_day span{
  color: #8c8c8c;
  font-size: 14px;
}
.top_content_day p{
  font-size: 30px;
  color: #030303;
}
.second{
  width: 1620px;
  height: 200px;
  margin: 25px auto 25px;
  display: flex;
  justify-content: space-between;
}
.second01{
  width: 1156px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.second01 li{
  width: 340px;
  height: 160px;
  padding: 45px 20px 0px 20px;
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.second02{
  width: 440px;
  height: 200px;
  background-color: #ffffff;
}
.li_title{
  width: 100%;
  height: 17px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.li_title span{
  color: #8c8c8c;
  font-size: 14px;
}
.li_title img{
  width: 20px;
  height: 20px;
  cursor: pointer;
}
.li_num {
  font-size: 38px;
  color: #262626;
  margin-top: 23px;
  /* margin-left: -8px; */
  flex: 1;
}
.li_end{
  width: 100%;
  height: 39px;
  border-top: 1px solid #e9e9e9;
  line-height: 39px;
  font-size: 14px;
  color: #8c8c8c;
}
.second02_top{
  width: 100%;
  height: 55px;
  border-bottom: 1px solid #e9e9e9;
}
.second02_top span{
  font-size: 16px;
  color: #262626;
  line-height: 55px;
  margin-left: 30px;
  display: block;
}
.second02_ul{
  width: calc(100% - 60px);
  height: 119px;
  padding: 25px 30px 0px;
}
.second02_ul li{
  width: 56px;
  height: 15px;
  color: #595959;
  font-size: 14px;
  margin-right: 50px;
  margin-bottom: 20px;
  float: left;
}
.second02_ul li:nth-child(4n){
  margin-right: 0;
}
.second02_ul li:last-of-type{
  width: 50px;
  height: 15px;
  padding: 4px 7.5px;
  border: 1px solid #3aa1ff;
  border-radius: 5px;
  cursor: pointer;
  margin-top: -5px;
}
.second02_ul li a{
  background: none !important;
}
.last_li_01{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.last_li_01 img{
  width: 13px;
  height: 13px;
}
.last_li_01 span{
  font-size: 14px;
  color: #3aa1ff;
}
.last_li_02{
  position: relative;
}
.last_li_02 input{
  width: 100%;
  outline: none;
  border-bottom: 1px solid #3aa1ff;
}
.del{
  width: 13px;
  height: 13px;
  position: absolute;
  top: -10.5px;
  right: -13.5px;
}
.third{
  width: 1620px;
  height: 405px;
  background: #ffffff;
  margin: 25px auto 0;
}
.third_header{
  width: 100%;
  height: 54px;
  border-bottom: 1px solid #e9e9e9;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.third_header_01{
  width: 175px;
  height: 100%;
  padding: 0 15px;
  display: flex;
  justify-content: space-between;
}
.third_header_01 span{
  width: 80px;
  height: 53px;
  color: #8c8c8c;
  font-size: 16px;
  line-height: 55px;
  text-align: center;
}
.act01{
  color: #1890ff !important;
  border-bottom: 2px solid #1890ff;
}
.third_header_02{
  width: 350px;
  height: 40px;
  margin-right: 20px;
}
.el-date-editor{
  position: absolute;
}
.shuzhuangtu{
  width: 1030px;
  height: 295px;
  margin-left: 25px;
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  float: left;
}
.shuzhuangtu_title{
  color: #262626;
  font-size: 14px;
}
.shuzhuangtu01{
  width: 100%;
  height: 245px;
}
.paiming{
  width: 436px;
  height: 278px;
  margin-top: 20px;
  margin-right: 20px;
  float: right;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
}
.paiming01{
  width: 431px;
  height: 245px;
  overflow: hidden;
}
.paiming_ul{
  width: 436px;
  height: 245px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  overflow-y: auto;
}
.paiming_ul li{
  width: 100%;
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}
.paiming_ul li p{
  width: 22px;
  height: 22px;
  display: block;
  border-radius: 50%;
  text-align: center;
  line-height: 22px;
  background-color: #f5f5f5;
  font-size: 14px;
}
.paiming_ul li span{
  font-size: 14px;
  color: #262626;
}
.paiming_ul li span:nth-child(2){
  margin-left: 15px;
  flex: 1;
}
.paiming_act p{
  background-color: #314659 !important;
  color: #ffffff !important;
}

.fourth{
  width: 1620px;
  height: 552px;
  margin: 25px auto 0;
  display: flex;
  justify-content: space-between;
}
.fourth01{
  width: 1070px;
  height: 100%;
  background-color: #ffffff;
}
.fourth01_top{
  width: 100%;
  height: 57px;
  border-bottom: 1px solid #e9e9e9;
}
.fourth01_top span{
  width: 62px;
  height: 56px;
  text-align: center;
  line-height: 58px;
  margin-left: 20px;
  font-size: 16px;
  display: block;
  float: left;
  cursor: pointer;
}
.act02{
  color: #1890ff !important;
  border-bottom: 2px solid #1890ff !important;
}
.fourth02{
  width: 1019px;
  height: 486px;
  margin: auto;
  overflow: hidden;
}
.fourth02 ul{
  width: 1025px;
  height: 486px;
  overflow-y: auto;
}
.fourth02 ul li{
  width: 100%;
  height: 62px;
  padding-top: 18px;
  border-bottom: 1px solid #e9e9e9;
}
.fourth02 ul li:last-of-type{
  border-bottom:none;
}
.touxiang{
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: #b2daff;
  float: left;
}
.touxiang img{
  width: 32px;
  height: 32px;
  display: block;
}
.msg{
  width: 200px;
  height: 46px;
  margin-left: 65px;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  justify-content: space-between;
}
.msg span{
  font-size: 14px;
  color: #262626;
}
.msg p{
  color: #d9d9d9;
  font-size: 12px;
}
.fourthRight{
  width: 526px;
  height: 100%;
  background-color: #ffffff;
}
.fourthRight_top{
  width: 496px;
  height: 57px;
  padding-left: 30px;
  border-bottom: 1px solid #e9e9e9;
  font-size: 16px;
  color: #262626;
  line-height: 57px;
}
.fourthRight_content{
  width: 210px;
  height: 365px;
  margin: 50px auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}
.fourthRight_content_01{
  height: 70px;
  width: 90px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}
.fourthRight_content_01 span {
  color: #8c8c8c;
  font-size: 14px;
}
.fourthRight_content_01 p{
  font-size: 38px;
  color: #262626;
}
.fourthRight_content_02{
  width: 300px;
  height: 300px;
}
</style>
